<template>
  <div class="w-100 d-flex justify-content-evenly" style="height: 60px">
    <div
      v-for="(item, index) in list"
      @click="swich(item, index)"
      class="item"
      :class="activeItem == index ? 'itemActive' : 'itemUnActive'"
    >
      <div style="width: ">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  list: {
    type: Array<string>,
    default: () => [],
  },
});
const activeItem = ref(0);
const swich = (item: any, index: any) => {
  emits("submitSwich", index);
  activeItem.value = index;
};

const emits = defineEmits(["submitSwich"]);
</script>

<style scoped lang="less">
.item {
  background-color: rgba(4, 55, 61, 0.9);
  font-size: 20px;
  font-family: "OPPOSans-Regular";
  line-height: 60px;
  flex-grow: 1;
  text-align: center;
  margin: 0px 10px 0px 10px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.itemUnActive {
  color: rgba(230, 253, 255, 0.5); /* 选中时的字体颜色 */
}
.itemActive {
  color: rgba(230, 253, 255, 1); /* 选中时的字体颜色 */
  border-bottom: 3px solid rgba(3, 230, 254, 1); /* 选中时的底部边框 */
}
</style>
